<template>
    <!-- 查看训练详情 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body @close="cancel" width="1300px" custom-class="myDialog">
        <el-card shadow="never" class="mb20">
            <ul class="planInfo">
                <li>
                    <span class="label">四时：</span>
                    <span v-if="trainingDayInfo.fourSeasons=='beforedawn'">早晨</span>
                    <span v-else-if="trainingDayInfo.fourSeasons=='morning'">上午</span>
                    <span v-else-if="trainingDayInfo.fourSeasons=='afternoon'">下午</span>
                    <span v-else>晚上</span>
                </li>
                <li>
                    <span class="label">训练时长：</span>
                    <span>{{trainingDayInfo.startTime+' ~ '+trainingDayInfo.endTime}}</span>
                </li>
                <li>
                    <span class="label">公里数(m)：</span>
                    <span>{{trainingDayInfo.kilometers}}</span>
                </li>
                <li>
                    <span class="label">热身公里数(m)：</span>
                    <span>{{trainingDayInfo.warmUpKilometers}}</span>
                </li>
                <li>
                    <span class="label">组数：</span>
                    <span>{{trainingDayInfo.numberGroups}}</span>
                </li>
                <li>
                    <span class="label">训练手段：</span>
                    <span>{{trainingDayInfo.trainingMode==0?'公里数':'时间'}}</span>
                </li>
                <li>
                    <span class="label">间歇时间(分钟)：</span>
                    <span>{{trainingDayInfo.gapTim}}</span>
                </li>
                <li>
                    <span class="label">课时完成度(%)：</span>
                    <span>{{trainingDayInfo.completion*100}}</span>
                </li>
                <!-- <li>
                    <span class="label">课程要求：</span>
                    <span>{{trainingDayInfo.srMemo}}</span>
                </li> -->
            </ul>
        </el-card>
        <div class="main-box">
            <el-collapse v-model="activeNames" class="mb20" @change="handleChange">
                <el-collapse-item :title="title2" name="1">
                    <div class="details-box" v-if="trainingDayInfo.schemeId">
                        <div class="name">方案名称：
                            <span style="color:#666">{{schemeDetails.name}}</span>
                        </div>
                        <div v-for="(item,index) in schemeDetails.schemeDetailsList" :key="item.id">
                            <div class="details-header">第{{index+1}}组</div>
                            <div class="details-row">
                                <div class="label">课程要求</div>
                                <div class="col">男</div>
                                <div class="col">女</div>
                            </div>
                            <div class="details-row">
                                <div class="label">总成绩</div>
                                <div class="col">{{item.achievementMale}}</div>
                                <div class="col">{{item.achievementFemale}}</div>
                            </div>
                            <div class="details-row">
                                <div class="label">桨频</div>
                                <div class="col">{{item.pulpMale}}</div>
                                <div class="col">{{item.pulpFemale}}</div>
                            </div>
                            <div class="details-row" v-if="schemeDetails.firstLevel=='land_specific_training_dynamometer'">
                                <div class="label">平均/500m</div>
                                <div class="col">{{item.powerMale}}</div>
                                <div class="col">{{item.powerFemale}}</div>
                            </div>
                            <div class="details-row">
                                <div class="label">心率</div>
                                <div class="col">{{item.heartRateMale}}</div>
                                <div class="col">{{item.heartRateFemale}}</div>
                            </div>
                        </div>
                    </div>
                    <div v-else style="text-align:center;color:#909399">暂无方案</div>
                </el-collapse-item>
            </el-collapse>
            <!-- 周围环境信息 -->
            <el-card class="environmental mb20" v-if="trainingDayInfo.firstLevel=='special_training_water'" v-loading="loading2">
                <el-form :model="trainingDayInfo" :inline="true" label-width="100px">
                    <el-form-item label="天气" prop="weather">
                        <el-select v-model="trainingDayInfo.weather" placeholder="请选择天气" clearable size="small" style="width:170px">
                            <el-option v-for="dict in weatherOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风速" prop="windSpeed">
                        <el-select v-model="trainingDayInfo.windSpeed" placeholder="请选择风速" clearable size="small" style="width:170px">
                            <el-option v-for="dict in windSpeedOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="气温（℃）" prop="airTemperature">
                        <el-input v-model="trainingDayInfo.airTemperature" placeholder="请输入气温" style="width:170px" />
                    </el-form-item>
                    <el-form-item label="场地因素" prop="siteFactors">
                        <el-select v-model="trainingDayInfo.siteFactors" placeholder="请选择风速" clearable size="small" style="width:170px">
                            <el-option v-for="dict in siteFactorsOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="本节课质量" prop="score">
                        <el-input v-model="trainingDayInfo.score" placeholder="0.0" style="width:170px" />
                    </el-form-item>
                    <!-- <el-form-item label="总时间(分钟)" prop="classHour">
                        <el-input v-model="trainingDayInfo.classHour" placeholder="课程完成总时间" style="width:170px" />
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="submitEnviron">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <!-- 小组航道信息 -->
            <el-row :gutter="20">
                <el-col :span="14">
                    <div v-show="!showHeartRate && !showLacticAcid && !showPropellerFrequency && !showSplitAchievement && !showWatt && !showPower">
                        <div class="wrap">
                            <div class="tab">
                                <div class="tab-li" :class="selectGroupIndex==index?'active':''" v-for="(item,index) in trainingGroupList" :key="index" @click="selectGroup(index)">
                                    <span>训练组{{index+1}}</span>
                                    <i v-if="index>0" class="el-icon-close" style="margin-left:2px;" @click.stop="deleteGroup(index)"></i>
                                </div>
                            </div>
                            <el-button type="primary" size="small" @click="addGroup">添加</el-button>
                        </div>
                        <div class="wrap" v-if="trainingDayInfo.firstLevel=='special_training_water'">
                            <div class="tab">
                                <div class="tab-li" :class="selectBatchIndex==index?'active':''" v-for="(item,index) in batchList" :key="index" @click="selectBatch(index)">
                                    <span>小组{{index+1}}</span>
                                </div>
                            </div>
                            <el-button type="primary" size="small" @click="addBatch">添加</el-button>
                        </div>
                        <el-table v-loading="loading" :data="channelList" border>
                            <!-- <el-table-column :label="trainingDayInfo.firstLevel=='special_training_water'?'航道名称':'测功仪'" align="center" key="1">
                                <template slot-scope="scope">
                                    <span v-if="trainingDayInfo.firstLevel=='special_training_water'">第{{scope.$index+1}}航道</span>
                                    <span v-else>{{scope.$index+1}}号测功仪</span>
                                </template>
                            </el-table-column> -->
                            <el-table-column v-if="trainingDayInfo.firstLevel=='special_training_water'" label="航道名称" align="center" key="1">
                                <template slot-scope="scope">
                                    <span>第{{scope.$index+1}}航道</span>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="trainingDayInfo.firstLevel=='land_specific_training_dynamometer'" label="序号" type="index" width="55" align="center" :index="indexMethod" key="0" />
                            <el-table-column v-if="trainingDayInfo.firstLevel=='land_specific_training_dynamometer'" label="运动员" align="center" prop="sportsmanName" key="1">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.sportsmanName">{{scope.row.sportsmanName.join()}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="trainingDayInfo.firstLevel=='special_training_water'" label="艇种" align="center" prop="boatType" key="2">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id">{{scope.row.boatType}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="公里数(米)" align="center" prop="rowingKilometers" width="90" v-if="trainingDayInfo.trainingMode==0" key="3">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id" size="mini" type="text">{{scope.row.rowingKilometers}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="时长" align="center" prop="rowingClassHour" v-if="trainingDayInfo.trainingMode==1" key="3">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id" size="mini" type="text">{{scope.row.rowingClassHour}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="trainingDayInfo.firstLevel=='special_training_water'" label="船速" align="center" prop="shipSpeed" key="4">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id" size="mini" type="text">{{scope.row.shipSpeed}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="桨频" align="center" prop="propellerFrequency" key="5">
                                <template slot-scope="scope">
                                    <span class="link-type" v-if="scope.row.id" @click="seePropellerFrequency(scope.row.id)">{{scope.row.propellerFrequency}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="分段成绩" align="center" prop="segmentedTiming" key="6" width="85">
                                <template slot-scope="scope">
                                    <span class="link-type" v-if="scope.row.id" @click="seeSplitAchievement(scope.row.id)">{{scope.row.segmentedTiming}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="总成绩" align="center" prop="achievement" key="7" width="90">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.id" size="mini" type="text">{{scope.row.achievement}}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="瓦特" align="center" prop="watt" v-if="trainingDayInfo.firstLevel=='land_specific_training_dynamometer'" key="8">
                                <template slot-scope="scope">
                                    <el-button class="link-type" v-if="scope.row.id" size="mini" type="text" @click="seeWatt(scope.row.id)">查看</el-button>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="功率" align="center" prop="power" v-if="trainingDayInfo.firstLevel=='land_specific_training_dynamometer'" width="90" key="9">
                                <template slot-scope="scope">
                                    <el-button class="link-type" v-if="scope.row.id" size="mini" type="text" @click="seePower(scope.row.id)">查看</el-button>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="130">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="createChannel(scope)">创建</el-button>
                                    <el-button class="link-type" v-if="scope.row.id" size="mini" type="text" @click="seeHeartRate(scope.row.id)">心率</el-button>
                                    <el-button class="link-type" v-if="scope.row.id" size="mini" type="text" @click="seeLacticAcid(scope.row.id)">乳酸</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- 心率页面 -->
                    <heartRate v-if="showHeartRate" :channelId="channelId" @child-event="closeHeartRate"></heartRate>
                    <!-- 乳酸页面 -->
                    <lacticAcid v-if="showLacticAcid" :channelId="channelId" @child-event="closeLacticAcid"></lacticAcid>
                    <!-- 瓦特页面 -->
                    <watt v-if="showWatt" :channelId="channelId" @child-event="closeWatt"></watt>
                    <!-- 功率页面 -->
                    <power v-if="showPower" :channelId="channelId" @child-event="closePower"></power>
                    <!-- 桨频页面 -->
                    <propellerFrequency v-if="showPropellerFrequency" :channelId="channelId" @child-event="closePropellerFrequency"></propellerFrequency>
                    <!-- 分段成绩页面 -->
                    <splitAchievement v-if="showSplitAchievement" :channelId="channelId" @child-event="closeSplitAchievement"></splitAchievement>
                </el-col>
                <el-col :span="10">
                    <el-card shadow="hover">
                        <div class="header-box">
                            <div class="title-box">
                                <i class="el-icon-s-order"></i>
                                <span>{{trainingDayInfo.firstLevel=='special_training_water'?'航道信息':'测功仪信息'}}</span>
                            </div>
                            <div class="subTitle-box">
                                <span>第{{selectGroupIndex+1}}组</span>
                                <span v-if="trainingDayInfo.firstLevel=='special_training_water'">第{{selectBatchIndex+1}}小组</span>
                                <span v-if="trainingDayInfo.firstLevel=='special_training_water'">第{{selectChannelIndex+1}}航道</span>
                                <span v-if="trainingDayInfo.firstLevel=='land_specific_training_dynamometer'">{{selectChannelIndex+1}}号</span>
                            </div>
                        </div>
                        <el-form ref="form" :model="form" :inline="true" class="channel" label-width="100px">
                            <el-form-item label="艇种" style="width:220px" v-if="trainingDayInfo.firstLevel=='special_training_water'">
                                <el-select v-model="form.boatType" placeholder="请选择" size="small" style="width:100px" @change="selectBoat">
                                    <el-option v-for="dict in boatTypeOptions" :key="dict.dictValue" :label="dict.dictValue" :value="dict.dictValue" />
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="分段数" prop="stages" size="small" style="width:200px">
                                <el-select v-model="form.stages" placeholder="请选择" clearable size="small" style="width:100px">
                                    <el-option v-for="item in stageOptions" :key="item.value" :label="item.value" :value="item.value" />
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="公里数(m)" prop="rowingKilometers" size="small" style="width:200px" v-if="trainingDayInfo.trainingMode=='0'">
                                <el-input v-model="form.rowingKilometers" placeholder="请输入" style="width:100px" />
                            </el-form-item>
                            <el-form-item label="时间" prop="rowingClassHour" size="small" style="width:200px" v-if="trainingDayInfo.trainingMode=='1'">
                                <el-select v-model="form.rowingClassHour" placeholder="请选择" clearable size="small" style="width:100px">
                                    <el-option v-for="timeMeans in timeMeansOptions" :key="timeMeans.dictValue" :label="timeMeans.dictLabel" :value="timeMeans.dictValue" />
                                </el-select>
                            </el-form-item>
                            <!-- 运动员 -->
                            <div v-for="(item,index) in form.person" :key="index" class="personBox">
                                <el-row>
                                    <el-form-item :label="'运动员'+Number(index+1)" :prop="'person.'+index+'.sportsmanId'" size="small" style="width:200px;">
                                        <el-select v-model="item.sportsmanId" placeholder="请选择" clearable size="small" style="width:100px">
                                            <el-option v-for="dict in sportsmanList" :key="dict.id" :label="dict.name" :value="dict.id" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="桨位" :prop="'person.'+index+'.oarType'" size="small" style="width:200px;" v-if="form.boatType=='M 2-' || form.boatType=='W 2-' || form.boatType=='M 4-' || form.boatType=='W 8+' || form.boatType=='M 8+' || form.boatType=='Mix 8+'">
                                        <el-select v-model="item.oarType" placeholder="桨位" clearable size="small" style="width:100px">
                                            <el-option v-for="item in oarTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-row>
                                <el-form-item label="心率(次/分)" :prop="'person.'+index+'.heartRate'" size="small" style="width:210px;">
                                    <el-input v-model="item.heartRate" placeholder="多个空格分开" style="width:110px" />
                                </el-form-item>
                                <el-form-item label="乳酸(mmol/L)" :prop="'person.'+index+'.lacticAcid'" size="small" style="width:210px;">
                                    <el-input v-model="item.lacticAcid" placeholder="多个空格分开" style="width:110px" />
                                </el-form-item>
                                <el-form-item label="功率" :prop="'person.'+index+'.power'" size="small" style="width:210px;" v-if="trainingDayInfo.firstLevel=='land_specific_training_dynamometer'">
                                    <el-input v-model="item.power" placeholder="多个空格分开" style="width:110px" />
                                </el-form-item>
                                <el-form-item label="瓦特" :prop="'person.'+index+'.watt'" size="small" style="width:210px;" v-if="trainingDayInfo.firstLevel=='land_specific_training_dynamometer'">
                                    <el-input v-model="item.watt" placeholder="多个空格分开" style="width:110px" />
                                </el-form-item>
                            </div>
                            <el-form-item label="船速id" prop="shipSpeedId" size="small" v-if="trainingDayInfo.firstLevel=='special_training_water'">
                                <el-input v-model="form.shipSpeedId" placeholder="请输入船速id" />
                            </el-form-item>
                            <el-form-item label="船速" prop="shipSpeed" size="small" v-if="trainingDayInfo.firstLevel=='special_training_water'">
                                <el-input v-model="form.shipSpeed" placeholder="请输入船速" />
                            </el-form-item>
                            <el-form-item label="桨频(桨/分)" prop="propellerFrequency" size="small">
                                <el-input v-model="form.propellerFrequency" placeholder="多次空格隔开" />
                            </el-form-item>
                            <el-form-item label="分段成绩" prop="segmentedTiming" size="small">
                                <el-input v-model="form.segmentedTiming" :placeholder="trainingDayInfo.trainingMode=='0'?'输入格式为00:00:00.0':'公里数,多个空格分开'" />
                            </el-form-item>
                            <el-form-item label="总成绩" prop="achievement" size="small">
                                <el-input v-model="form.achievement" :placeholder="trainingDayInfo.trainingMode=='0'?'输入格式为00:00:00.0':'公里数,多个空格分开'" />
                            </el-form-item>
                            <el-button type="primary" @click="submitChannel" class="saveChannel">保存</el-button>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</template>
<script>
import { delTrainingGroup, addTrainingGroup, listTrainingGroup } from "@/api/training/trainingGroup";
import { listSportsman } from "@/api/training/sportsman";
import { getTrainingGroupChannelInfo, listTrainingGroupChannel, updateEnvironmental, addTrainingGroupChannel, updateTrainingGroupChannel } from "@/api/training/trainingGroupChannel";
import { getTrainingDayInfo } from "@/api/training/trainingDay";
import { schemeDetails } from "@/api/training/scheme";
import heartRate from "../components/heartRate.vue";
import lacticAcid from "../components/lacticAcid.vue";
import watt from "../components/watt.vue";
import power from "../components/power.vue";
import propellerFrequency from "../components/propellerFrequency";
import splitAchievement from "../components/splitAchievement";
export default {
    name: "groupChannel",
    components: {
        heartRate,
        lacticAcid,
        watt,
        power,
        propellerFrequency,
        splitAchievement
    },
    // 接收父组件的值
    props: {
        groupChannelDialogVisible: Boolean
    },
    data() {
        return {
            // 显示航道列表
            showChannelList: true,
            // 航道id
            channelId: '',
            // 显示心率
            showHeartRate: false,
            // 显示乳酸
            showLacticAcid: false,
            // 显示瓦特
            showWatt: false,
            // 显示功率
            showPower: false,
            // 显示桨频
            showPropellerFrequency: false,
            // 显示分段成绩
            showSplitAchievement: false,
            // 遮罩层
            loading: true,
            loading2: false,
            // 弹出层标题
            title: "",
            trainingDayInfo: '',
            trainingGroupList: [],
            // 选择训练组的index
            selectGroupIndex: 0,
            // 小组（批次）列表
            batchList: [],
            // 选择训练小组的index
            selectBatchIndex: 0,
            // 选择训练航道或测功仪的index
            selectChannelIndex: 0,
            // 航道list
            channelList: [{}, {}, {}, {}, {}, {}],
            // 周围环境
            // trainingDayInfo: {},
            //天气集合
            weatherOptions: [],
            //风速集合
            windSpeedOptions: [],
            // 场地因素
            siteFactorsOptions: [],
            // 创建航道
            form: {},
            // 艇种下拉框数组
            boatTypeOptions: [],
            // 时间下拉框数组
            timeMeansOptions: [],
            // 桨位下拉数组
            oarTypeOptions: [
                { value: 0, label: '双桨' },
                { value: 1, label: '左桨' },
                { value: 2, label: '右桨' },
            ],
            // 阶段下拉框数组
            stageOptions: [
                { value: 1, label: '一阶段' },
                { value: 2, label: '二阶段' },
                { value: 3, label: '三阶段' },
                { value: 4, label: '四阶段' },
                { value: 5, label: '五阶段' },
                { value: 6, label: '六阶段' },
                { value: 7, label: '七阶段' },
                { value: 8, label: '八阶段' }
            ],
            //姓名下拉框数组
            sportsmanList: [],
            sportsmanParams: "",
            activeNames: [],
            title2: '查看方案',
            schemeDetails: ''
        };
    },
    computed: {
        dialogVisible: {
            set(val) {
                this.$emit('close', val) // 将子组件dialogVisible改变的值传递给父组件
            },
            get() {
                return this.groupChannelDialogVisible // 表示获取父组件的值
            }
        }
    },
    created() {
        //艇种字典
        this.getDicts("type_boat_support").then((response) => {
            this.boatTypeOptions = response.data;
        });
        // this.getSportsmanList();

        //天气集合
        this.getDicts("weather").then(response => {
            this.weatherOptions = response.data;
        });

        //风速集合
        this.getDicts("wind_speed").then(response => {
            this.windSpeedOptions = response.data;
        });
        //场地因素集合
        this.getDicts("site_factors").then(response => {
            this.siteFactorsOptions = response.data;
        });
        //训练时间手段字典
        this.getDicts("time_means").then(response => {
            this.timeMeansOptions = response.data;
        });

    },
    methods: {
        // 设置序号方法
        indexMethod(index) {
            return index + 1;
        },
        // 获取方案详情
        getSchemeDetails() {
            const id = this.trainingDayInfo.schemeId
            if (id) {
                schemeDetails(id).then(response => {
                    console.log(response)
                    if (response.code == '200') {
                        this.schemeDetails = response.data
                    } else {
                        this.msgError('请求失败');
                    }
                })
            }
        },
        // 展开训练组
        handleChange(val) {
            if (val.length > 0) {
                this.title2 = '收起方案'
            } else {
                this.title2 = '查看方案'
            }

        },
        // 关闭心率
        closeHeartRate(res) {
            this.showHeartRate = false
        },
        // 关闭乳酸
        closeLacticAcid() {
            this.showLacticAcid = false
        },
        // 关闭瓦特
        closeWatt() {
            this.showWatt = false
        },
        // 关闭功率
        closePower() {
            this.showPower = false
        },
        // 关闭桨频
        closePropellerFrequency() {
            this.showPropellerFrequency = false
        },
        // 关闭分段成绩
        closeSplitAchievement() {
            this.showSplitAchievement = false
        },
        // 查看心率
        seeHeartRate(id) {
            this.channelId = id
            this.showHeartRate = true
        },
        // 查看乳酸
        seeLacticAcid(id) {
            this.channelId = id
            this.showLacticAcid = true
        },
        // 查看瓦特
        seeWatt(id) {
            this.channelId = id
            this.showWatt = true
        },
        // 查看功率
        seePower(id) {
            this.channelId = id
            this.showPower = true
        },
        // 查看桨频
        seePropellerFrequency(id) {
            this.channelId = id
            this.showPropellerFrequency = true
        },
        // 查看分段成绩
        seeSplitAchievement(id) {
            this.channelId = id
            this.showSplitAchievement = true
        },
        // 查看按钮操作
        handleSee(trainingDayInfo) {
            this.trainingDayInfo = trainingDayInfo
            this.trainingGroupList = this.trainingDayInfo.trainingGroup
            this.title = trainingDayInfo.firstLevelName + '--' + trainingDayInfo.secondLevelName
            this.selectGroupIndex = 0
            this.selectBatchIndex = 0
            this.selectChannelIndex = 0
            this.getBatchList()
            this.getChannelList()
            // 如果训练日下面没有航道
            const realBatchList = this.trainingGroupList[this.selectGroupIndex].trainingGroupChannel
            if (realBatchList.length > 0) {
                this.getChannelInfo(realBatchList[0][0].id)
            } else {
                // this.form = this.emptyForm
                this.form = {
                    achievement: undefined,
                    achievementMs: undefined,
                    batch: this.selectBatchIndex,
                    boatType: undefined,
                    channelName: this.selectChannelIndex,
                    ctime: undefined,
                    groupId: this.trainingGroupList[this.selectGroupIndex].id,
                    groupName: undefined,
                    id: undefined,
                    person: undefined,
                    power: undefined,
                    propellerFrequency: undefined,
                    rowingClassHour: this.trainingDayInfo.classHour,
                    rowingKilometers: this.trainingDayInfo.kilometers,
                    segmentedTiming: undefined,
                    stages: undefined,
                    watt: undefined,
                    shipSpeed: undefined,
                    shipSpeedId: undefined
                }
                this.landSportsMan()
            }
            this.getSchemeDetails()
        },
        // 点击创建航道
        createChannel(scope) {
            const id = scope.row.id
            this.selectChannelIndex = scope.$index
            this.getChannelInfo(id)
        },
        // 获取某个航道的详细信息
        getChannelInfo(id) {
            if (id) {
                getTrainingGroupChannelInfo(id).then((response) => {
                    this.form = response.data;
                    this.getSportsmanList()
                });
            } else {
                this.form = {
                    achievement: undefined,
                    achievementMs: undefined,
                    batch: this.selectBatchIndex,
                    boatType: undefined,
                    channelName: this.selectChannelIndex,
                    ctime: undefined,
                    groupId: this.trainingGroupList[this.selectGroupIndex].id,
                    groupName: undefined,
                    id: undefined,
                    person: undefined,
                    power: undefined,
                    propellerFrequency: undefined,
                    rowingClassHour: this.trainingDayInfo.classHour,
                    rowingKilometers: this.trainingDayInfo.kilometers,
                    segmentedTiming: undefined,
                    stages: undefined,
                    watt: undefined,
                    shipSpeed: undefined,
                    shipSpeedId: undefined
                }
                this.landSportsMan()
                this.getSportsmanList()
            }
        },
        // 获取训练组列表
        getTrainingGroupList() {
            getTrainingDayInfo(this.trainingDayInfo.id).then((response) => {
                this.trainingGroupList = response.data.trainingGroup
                this.getChannelList()
            })
        },
        // 获取小组
        getBatchList() {
            const realBatchList = this.trainingGroupList[this.selectGroupIndex].trainingGroupChannel
            if (realBatchList.length > 0) {
                this.batchList = realBatchList
            } else {
                this.batchList = [{}]
            }
        },
        // 获取航道信息
        getChannelList() {
            const nullArray = [{}, {}, {}, {}, {}, {}]
            var realChanneList
            const query = { groupId: this.trainingGroupList[this.selectGroupIndex].id }
            if (this.trainingDayInfo.firstLevel == 'special_training_water') {
                realChanneList = this.trainingGroupList[this.selectGroupIndex].trainingGroupChannel[this.selectBatchIndex]
                if (realChanneList) {
                    this.channelList = realChanneList.concat(nullArray).slice(0, 6)
                } else {
                    this.channelList = nullArray
                }
                // this.channelList = realChanneList.concat(nullArray).slice(0, 6)
            } else if (this.trainingDayInfo.firstLevel == 'land_specific_training_dynamometer') {
                listTrainingGroupChannel(query).then(response => {
                    realChanneList = response.rows;
                    this.channelList = realChanneList.concat(nullArray).slice(0, 6)
                })
            }
            this.loading = false
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;
            this.showHeartRate = false,
                this.showWatt = false,
                this.showPower = false,
                this.showPropellerFrequency = false,
                this.showSplitAchievement = false
        },
        // 选择训练组
        selectGroup(index) {
            this.reset()
            this.selectGroupIndex = index
            this.selectBatchIndex = 0
            this.selectChannelIndex = 0
            this.getBatchList()
            this.getChannelList()
            if (this.trainingGroupList[index].trainingGroupChannel.length > 0) {
                this.getChannelInfo(this.trainingGroupList[index].trainingGroupChannel[0][0].id)
            }
        },
        // 选择小组(批次)
        selectBatch(index) {
            this.reset()
            this.selectBatchIndex = index
            this.getChannelList()
            if (this.trainingGroupList[index].trainingGroupChannel.length > 0) {
                this.getChannelInfo(this.trainingGroupList[index].trainingGroupChannel[0][0].id)
            }
        },
        // 删除训练组
        deleteGroup(index) {
            const id = this.trainingGroupList[index].id
            delTrainingGroup(id).then(response => {
                if (response.code === 200) {
                    this.msgSuccess("删除成功");
                    this.trainingGroupList.splice(index, 1)
                    this.selectGroupIndex = index - 1
                    this.getTrainingGroupList();
                } else {
                    this.msgError("删除失败")
                }
            })
        },
        // 添加训练组
        addGroup() {
            const groupObj = {
                ctime: "",
                day: this.trainingDayInfo.day,
                field: "",
                groupName: "第" + Number(this.trainingGroupList.length + 1) + "组",
                //  groupName: "",
                id: "",
                kilometer: "",
                trainingDayId: this.trainingDayInfo.id,
                type: this.trainingDayInfo.type,
                weekId: this.trainingDayInfo.weekId,
                weekName: ""
            }
            addTrainingGroup(groupObj).then(response => {
                this.getTrainingGroupList()
                if (response.code === 200) {
                    this.msgSuccess("添加成功")
                } else {
                    this.msgError("添加失败")
                }
            })
        },
        // 添加小组
        addBatch() {
            this.batchList.push([{}, {}, {}, {}, {}, {}])
            this.getChannelList()
        },
        //赛事姓名集合
        getSportsmanList() {
            const boatType = this.form.boatType
            if (boatType) {
                const type = boatType.split(" ")[0]
                if (type === 'M') {
                    this.sportsmanParams = { sex: 0 }
                } else if (type === 'W') {
                    this.sportsmanParams = { sex: 1 }
                } else {
                    this.sportsmanParams = {}
                }
            } else {
                this.sportsmanParams = {}
            }
            listSportsman(this.sportsmanParams).then(response => {
                this.sportsmanList = response.rows;
                this.total = response.total;
            });

        },
        // 提交submitEnviron
        submitEnviron() {
            this.loading2 = true;
            updateEnvironmental(this.trainingDayInfo).then((response) => {
                if (response.code === 200) {
                    this.msgSuccess("保存成功");
                } else {
                    this.msgError(response.msg);
                }
                this.loading2 = false;
            });
        },
        // 表单重置
        reset() {
            this.form = {
                achievement: undefined,
                achievementMs: undefined,
                batch: undefined,
                boatType: undefined,
                channelName: undefined,
                ctime: undefined,
                groupId: undefined,
                groupName: undefined,
                id: undefined,
                person: undefined,
                power: undefined,
                propellerFrequency: undefined,
                rowingClassHour: undefined,
                rowingKilometers: undefined,
                segmentedTiming: undefined,
                stages: undefined,
                watt: undefined,
                shipSpeed: undefined,
                shipSpeedId: undefined
            };
            this.resetForm("form");
        },
        // 如果属于陆上专项训练，默认显示一个运动员
        landSportsMan() {
            if (this.trainingDayInfo.firstLevel == 'land_specific_training_dynamometer') {
                this.form.person = []
                let person = {
                    batch: this.selectBatchIndex,
                    channelId: undefined,
                    channelName: this.selectChannelIndex,
                    ctime: undefined,
                    day: this.trainingDayInfo.day,
                    groupId: this.trainingGroupList[this.selectGroupIndex].id,
                    groupName: undefined,
                    heartRate: undefined,
                    id: undefined,
                    lacticAcid: undefined,
                    oarType: undefined,
                    position: undefined,
                    power: undefined,
                    secondLevel: this.trainingDayInfo.secondLevel,
                    sportsmanId: undefined,
                    sportsmanName: undefined,
                    trainingDayId: this.trainingDayInfo.id,
                    type: undefined,
                    watt: undefined,
                    weekId: this.trainingDayInfo.weekId,
                    weekName: undefined
                }
                this.form.person.push(person)
            }
        },

        // 选择艇种
        selectBoat(value) {
            this.getSportsmanList()
            const num = value.split(" ")[1].substr(0, 1)
            this.form.person = []
            for (let i = 0; i < num; i++) {
                const person = {}
                // 如果艇种是8人，运动员位置position从0开始，0代表舵手；否则位置从1开始
                if (num === '8') {
                    person = {
                        batch: this.selectBatchIndex,
                        channelId: undefined,
                        channelName: this.selectChannelIndex,
                        ctime: undefined,
                        day: this.trainingDayInfo.day,
                        groupId: this.trainingGroupList[this.selectGroupIndex].id,
                        groupName: undefined,
                        heartRate: undefined,
                        id: undefined,
                        lacticAcid: undefined,
                        oarType: undefined,
                        position: i,
                        power: undefined,
                        secondLevel: this.trainingDayInfo.secondLevel,
                        sportsmanId: undefined,
                        sportsmanName: undefined,
                        trainingDayId: this.trainingDayInfo.id,
                        type: undefined,
                        watt: undefined,
                        weekId: this.trainingDayInfo.weekId,
                        weekName: undefined
                    }
                } else {
                    person = {
                        batch: this.selectBatchIndex,
                        channelId: undefined,
                        channelName: this.selectChannelIndex,
                        ctime: undefined,
                        day: this.trainingDayInfo.day,
                        groupId: this.trainingGroupList[this.selectGroupIndex].id,
                        groupName: undefined,
                        heartRate: undefined,
                        id: undefined,
                        lacticAcid: undefined,
                        oarType: undefined,
                        position: Number(i + 1),
                        power: undefined,
                        secondLevel: this.trainingDayInfo.secondLevel,
                        sportsmanId: undefined,
                        sportsmanName: undefined,
                        trainingDayId: this.trainingDayInfo.id,
                        type: undefined,
                        watt: undefined,
                        weekId: this.trainingDayInfo.weekId,
                        weekName: undefined
                    }
                }
                this.form.person.push(person)
            }
        },
        // 保存航道
        submitChannel() {
            this.loading = true
            if (this.form.id != undefined) {
                updateTrainingGroupChannel(this.form).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("修改成功");
                        this.getTrainingGroupList();
                        this.loading = false
                    } else {
                        this.msgError(response.msg);
                    }
                });
            } else {
                addTrainingGroupChannel(this.form).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("新增成功");
                        this.getTrainingGroupList();
                        this.loading = false
                    } else {
                        this.msgError(response.msg);
                    }
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.planInfo {
    padding: 0;
    margin: 0;
    li {
        float: left;
        list-style: none;
        color: #666;
        min-width: 200px;
        margin: 10px 30px;
        .label {
            font-size: 14px;
            color: #606266;
            font-weight: bold;
        }
    }
}
.planInfo::after {
    display: block;
    clear: both;
    content: "";
}
.wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid#EBEEF5;
    margin-bottom: 10px;
    .tab {
        display: flex;
        align-items: center;
        width: 800px;
        overflow: auto;
        margin-right: 30px;
        height: 40px;
        margin-bottom: -1px;
        .tab-li {
            flex-shrink: 0;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            // border-radius: 4px;
            border: 1px solid#EBEEF5;
            border-bottom: none;
            color: #606266;
            // margin-right: 20px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            .el-icon-close:hover {
                background-color: #1890ff;
                border-radius: 50%;
                color: #fff;
                cursor: pointer;
            }
        }
        .tab-li.active {
            color: #1890ff;
            border: 1px solid #1890ff;
            border-bottom: 1px solid #fff;
        }
    }
}
.header-box {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 30px;
    .title-box {
        color: #409eff;
        font-size: 16px;
        margin-right: 30px;
    }
    .subTitle-box {
        color: #d43030;
        span {
            margin: 0 3px;
            font-size: 14px;
        }
    }
}
.main-box {
    max-height: 70vh;
    padding-top: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}
.environmental {
    .el-form--inline .el-form-item {
        margin: 10px 20px 10px 0;
    }
}
.personBox {
    padding-top: 10px;
    // border:1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}
.saveChannel {
    display: block;
    width: 120px;
    margin: 0 auto;
}
.details-box {
    // margin-top: 30px;
    text-align: center;
    .details-header {
        color: #303133;
        font-size: 16px;
        font-weight: bold;
        background: #dcdfe6;
        // border-top: 1px solid #666;
        height: 40px;
        line-height: 40px;
    }
    .details-row {
        display: flex;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #dcdfe6;
        .label {
            border-left: 1px solid #dcdfe6;
            border-right: 1px solid #dcdfe6;
            color: #409eff;
            font-size: 15px;
            // background: #be4a57;
            width: 20%;
        }
        .col {
            border-right: 1px solid #dcdfe6;
            width: 40%;
        }
    }
    .name {
        text-align: left;
        font-size: 15px;
        font-weight: bold;
        color: #606266;
    }
}
</style>
<style lang="scss">
.main-box {
    .el-collapse-item__header {
        color: #409eff;
        font-size: 15px;
        font-weight: bold;
        display: inline-block;
    }
}
</style>
